import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';
import G2 from '@antv/g2';
// import { View, DataSet } from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import classNames from 'classnames';
import { isEqual } from 'lodash';
import { isNotEmptyArray } from '../../../utils/utils';
import '../index.less';

const primaryColor = '#2F9CFF';
const infoColor = '#53A0FD';

export default class BaseLine extends PureComponent {
  /*static defaultProps = {};

  state = {};

  componentWillMount() {

  }*/
  componentDidMount() {
    this.initChart();
    window.addEventListener('resize', this.resize);
  }

  componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props, nextProps)) {
      this.initChart(nextProps);
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
    this.data = null;
    if (this.chart) {
      this.chart.destroy();
    }
    this.resize.cancel();
  }
  @Bind()
  @Debounce(200)
  resize() {
    if (!this.node) {
      return;
    }
    this.renderChart();
  }

  /**
   * 延迟加载，避免样式还没渲染完成导致 this.node.clientHeight 获取时值不对
   */
  @Debounce(10)
  initChart(nextProps) {
    const {
      x, y, data = [],
    } = nextProps || this.props;

    if (!x || !y) {
      throw new Error('x or y not defined');
    }
    if (!isNotEmptyArray(data)) {
      return;
    }
    this.data = data.map(e => ({
      x: e[x],
      y: Number(e[y]),
    }));
    this.renderChart(nextProps);
  }

  handleRef = (n) => {
    this.node = n;
  }

  renderChart(nextProps) {
    const {
      height = this.node.clientHeight,
      color = primaryColor, pointColor = infoColor, yAlias, xAlias,
      yMin = 0, pointRadius = 4, pointShape = 'circle', isSmooth = false,
      animate = true, padding = [20, 20, 40, 48],
    } = nextProps || this.props;

    if (this.chart) {
      this.chart.clear();
    }
    if (this.node) {
      this.node.innerHTML = '';
    }

    const chart = new G2.Chart({
      container: this.node,
      forceFit: true,
      height,
      animate,
      padding,
    });
    chart.source(this.data);
    chart.scale('y', {
      min: yMin,
      nice: true,
      tickCount: 5,
      alias: yAlias,
    });
    chart.scale('x', {
      range: [0, 1],
      nice: true,
      alias: xAlias,
    });
    chart.tooltip({
      crosshairs: {
        type: 'y',
      },
    });
    if (isSmooth) {
      chart.line().position('x*y').color(color).shape('smooth');
    } else {
      chart.line().position('x*y').color(color);
    }
    chart.point().position('x*y').color(pointColor).size(pointRadius)
      .shape(pointShape)
      .style({
        stroke: '#fff',
        lineWidth: 1,
      });

    this.chart = chart;
    chart.render();
  }

  render() {
    const { data } = this.props;

    const noDataClass = classNames({ noData: !isNotEmptyArray(data) });
    return (
      <div ref={this.handleRef} className="chart">
        <div className={noDataClass}>暂无数据</div>
      </div>
    );
  }
}
